<template>
  <div class="execution">
    <basic-container>
      <div class="info-row">
        <div class="info-body">
          <div class="info-header">
            <h4>商品信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <el-table
                  style="width: 80%"
                  border
                  :data="details.dtlList"
                  :header-cell-style="{
                    color: '#4D4D4D',
                    background: '#F1F2F7',
                  }"
                >
                  <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.id }}
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" align="center">
                    <template slot-scope="scope">
                      ￥{{ scope.row.productName }}
                    </template>
                  </el-table-column>

                  <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                      <img
                        :src="scope.row.skuPic"
                        style="width: 50px; height: 50px"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="商品规格" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.skuVals }}
                    </template>
                  </el-table-column>
                  <el-table-column label="商品价格" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.skuPrice }}
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.skuQuantity }}
                    </template>
                  </el-table-column>
                  <el-table-column label="运费" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.freightAmount }}
                    </template>
                  </el-table-column>
                  <el-table-column label="税费" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.taxAmount }}
                    </template>
                  </el-table-column>
                </el-table>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>买家信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label style="min-width: 10em">会员ID</label>
                <span>{{ details.memberId }}</span>
              </li>
<!--              <li class="info-desc-item">-->
<!--                <label style="min-width: 10em">昵称</label>-->
<!--                <span>{{ details.memberName }}</span>-->
<!--              </li>-->
              <li class="info-desc-item">
                <label style="min-width: 10em">会员账号</label>
                <span>{{ details.memberPhone }}</span>
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">收货地址</label>
                <span
                  >{{ details.receiverProvince }}{{ details.receiverCity
                  }}{{ details.receiverRegion }}{{ details.receiverDetailAddress}}</span
                >
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">收货人</label>
                <span>{{ details.receiverName }}</span>
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">收货手机号</label>
                <span>{{ details.receiverPhone }}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="info-body">
          <div class="info-header">
            <h4>订单信息</h4>
            <div class="link-top"></div>
          </div>
          <div class="info-main">
            <ul class="info-desc-list">
              <li class="info-desc-item">
                <label style="min-width: 10em">订单编号</label>
                <span>{{ details.orderSn }}</span>
              </li>
<!--              <li class="info-desc-item">-->
<!--                <label style="min-width: 10em">应付金额</label>-->
<!--                <span>{{ details.orderSn }}</span>-->
<!--              </li>-->
              <li class="info-desc-item">
                <label style="min-width: 10em">优惠券</label>
                <span>56</span>
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">是否使用礼品卡</label>
                <span v-if="details.useGift === 1">是</span>
                <span v-if="details.useGift === 2">否</span>
                <label v-if="details.useGift === 1" style="min-width: 10em"
                  >是否使用礼品卡</label
                >
                <span v-if="details.useGift === 1">{{
                  details.giftAmount
                }}</span>
              </li>
              <li class="info-desc-item" v-if="details.useGift === 2">
                <label style="min-width: 10em">新人优惠券</label>
                <span>{{ details.newCouponAmount }}</span>
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">实付金额</label>
                <span>{{ details.totalAmount }}</span>
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em">订单状态</label>
                <span style="color: red" v-if="details.status == 1"
                  >待付款</span
                >
                <span style="color: red" v-if="details.status == 2"
                  >待发货</span
                >
                <span style="color: red" v-if="details.status == 3"
                  >已发货</span
                >
                <span style="color: red" v-if="details.status == 4"
                  >已完成</span
                >
                <span style="color: red" v-if="details.status == 5"
                  >已关闭</span
                >
                <span style="color: red" v-if="details.status == 6"
                  >无效订单</span
                >
              </li>
              <li class="info-desc-item">
                <label style="min-width: 10em" v-if="details.status == 4">完成时间</label>
                <label style="min-width: 10em" v-else>提交时间</label>
                <span v-if="details.status == 1">{{ details.createTime }}</span>
                <span v-if="details.status == 2">{{
                  details.paymentTime
                }}</span>
                <span v-if="details.status == 3">{{
                  details.deliveryTime
                }}</span>
                <span v-if="details.status == 4">{{
                  details.receiveTime
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </basic-container>
  </div>
</template>
<script>
import { getOrderDtl } from "@/api/oms/oder";
export default {
  data() {
    return {
      details: {},
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      getOrderDtl({ id: this.$route.query.id }).then((res) => {
        console.log(res);
        this.details = res.data.data;
      });
    },
  },
};
</script>
